<template>
  <div class="mian-index">
    <div class="ele-div">
      <div class="index-left">
        <el-carousel :interval="3000" height="100%" loop class="ele-carousel">
          <el-carousel-item>
            <img src="../../../public/Illustra2.png" alt="">
          </el-carousel-item>
          <el-carousel-item>
            <img src="../../../public/Illustration.png" alt="">
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="index-right">
        <div class="ele-index-title"><h2>老宝贝商户管理后台</h2></div>
        <div class="ele-border">
          <p class="ele-title">登录</p>
          <el-input
            v-model="loginForm.phone"
            class="ele-input-name"
            placeholder="输入手机号"
          />
          <el-input
            v-model="loginForm.password"
            type="password"
            class="ele-input-pwd"
            placeholder="输入密码"
          />
          <p class="ele-p-pwd">
            <el-checkbox v-model="isRemember">记住密码</el-checkbox>
            <!--            <el-button
              type="text"
              @click="pwdForget(loginForm)"
            >忘记密码？</el-button>-->
          </p>
          <div class="ele-btn">
            <el-button
              type="primary"
              class="ele-btn-name"
              @click="getLogin"
            >登录</el-button>
            <el-button type="success" class="ele-btn-pwd">
              <img src="./../../../public/Icon/wxx.svg" alt="">
              <span class="i-text">微信扫码登录</span></el-button>
            <el-button type="text" class="ele-btn-text">合作联系</el-button>
          </div>
        </div>
        <p style="text-align: center">当前版本号:{{ version }}</p>
      </div>
    </div>

  </div>

</template>

<script>
export default {
  name: 'LoginPage',
  data() {
    return {
      version: '0.0.1',
      isRemember: false,
      loginForm: {
        phone: '',
        password: '',
        loginType: '0'
      }
    }
  },
  watch: {
    $route: {
      handler: function(route) {
        this.redirect = route.query && route.query.redirect
      },
      immediate: true
    },
    isRemember: {
      handler: function(newVlaue, oldVal) {
        if (this.isRemember) {
          localStorage.setItem('login-user-info', this.$ed({
            phone: this.loginForm.phone,
            password: this.loginForm.password
          }))
        } else {
          localStorage.removeItem('login-user-info')
        }
      }
    }
  },
  created() {
    if (localStorage.getItem('login-user-info')) {
      const params = this.$dd(localStorage.getItem('login-user-info'))
      console.log(params)
      this.loginForm.phone = params.phone
      this.loginForm.password = params.password
      this.isRemember = true
    }
  },
  methods: {
    getLogin() {
      // this.$router.push({ path: '/BindingPhone' })
      const vm = this
      if (!this.loginForm.phone) {
        return this.$message.error('用户名不能为空')
      }
      if (!this.loginForm.password) {
        return this.$message.error('密码不能为空')
      }
      vm.$store
        .dispatch('LoginByUsername', vm.loginForm)
        .then(() => {
          this.loading = false
          if (this.isRemember) {
            localStorage.setItem('login-user-info', this.$ed({
              phone: this.loginForm.phone,
              password: this.loginForm.password
            }))
          } else {
            localStorage.removeItem('login-user-info')
          }
          localStorage.setItem('login-user', vm.$ed({
            loginUser: vm.loginForm.phone
          }))
          vm.$router.push({ path: '/shop/manager' })
          /* vm.$router.push({ path: this.redirect || '/shop/manager' })*/
          localStorage.removeItem('shopId')
        })
        .catch(response => {
          vm.$notify.error({
            title: '失败',
            message: response.data.errmsg
          })
        })
    }
    /** 忘记密码 */
    /* pwdForget(val) {}*/
  }
}
</script>

<style lang="scss" scoped>
.mian-index {
  width: 100vw;
  height: 100vh;
  background: #f3f3f3;
  display: flex;
  justify-content: center;
  align-items: center;
  .ele-div {
    width: 60%;
    height: 650px;
    background: #fff;
    display: flex;
    .index-left,
    .index-right {
      width: 50%;
    }
    .index-left {
      .ele-carousel {
        height: 650px;
        width: 100%;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    .index-right {
      padding: 0px 5%;
      .ele-index-title {
        color: #4482d9;
        margin-top: 80px;
      }
      .ele-border {
        width: 100%;
        height: 68%;
        border: 1px solid #e6e6e6;
        padding: 0px 30px;
        border-radius: 5px;
        margin-top: 40px;
        .ele-title {
          font-size: 24px;
        }
        .ele-input-name,
        .ele-input-pwd {
          ::v-deep.el-input__inner {
            height: 50px !important;
          }
        }
        .ele-input-pwd {
          margin-top: 20px;
        }
        .ele-p-pwd {
          width: 100%;
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
        .ele-btn {
          display: flex;
          flex-direction: column;
          .ele-btn-name,
          .ele-btn-pwd,
          .ele-btn-text {
            margin: 0px;
          }
          .el-button--medium {
            height: 40px;
          }
          .ele-btn-pwd {
            display: flex;
            justify-content: center;
            align-items: center;
            .i-text {
              position: relative;
              top: -10px;
            }
          }
          .ele-btn-pwd,
          .ele-btn-text {
            margin-top: 20px;
          }
        }
      }
    }
  }
}
</style>
